<!--<extend name="en_us:Public:base" />-->
<!--<block name="title">
    <title>QRInn - Hotel management</title>
</block>-->
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=bdf8875f9e52f651ec877dc7073586ed">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/BookSettingPage/pay.css?rev=8f4dcd97ecf9dec7e1514db3a1e0575d">
</block>
<block name="document">
    <div id="doc" class="container-above-md">
        <include file="en_us:Public:Include_control_navbar" navbar-menu-setting="active" />
        <div id="doc-body" class="row">
            <include file="en_us:Public:Include_booking_tab" booking-tab-pay="active" />
            <div id="doc-center">
                <div class="content-panel" id="uclbrtSwitchContainer">
                    <div class="content-panel-header">
                        <div class="content-panel-title">Collection by UCLBRT:</div>
                    </div>
                    <div class="content-panel-header" style="margin-left: 36px;">
                        <div class="content-panel-title">Alipay(<span id="uclbrtAlipayLabel"></span> enabled)</div>
                        <div class="col-xs-8">
                            <div class="col-xs-1">
                                <label class="switch ulite-js-switch ulite-js-ripple-effect ulite-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialSwitch,MaterialRipple" id="uclbrtAlipayEnable">
                                    <input style="visibility:hidden" type="checkbox" class="switch-input"/>
                                    <!--<span class="switch-label switch-label-sm"></span>-->
                                    <div class="switch-track"></div>
                                    <div class="switch-thumb"><span class="switch-focus-helper"></span></div>
                                    <span class="switch-ripple-container ulite-js-ripple-effect ulite-ripple--center" data-upgraded=",MaterialRipple"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="content-panel-header" style="margin-left: 36px;">
                        <div class="content-panel-title">WeChat Pay(<span id="uclbrtWechatLabel"></span> enabled)</div>
                        <div class="col-xs-8">
                            <div class="col-xs-1">
                                <label class="switch ulite-js-switch ulite-js-ripple-effect ulite-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialSwitch,MaterialRipple"  id="uclbrtWechatEnable">
                                    <input style="visibility:hidden" type="checkbox" class="switch-input"/>
                                    <!--<span class="switch-label switch-label-sm"></span>-->
                                    <div class="switch-track"></div>
                                    <div class="switch-thumb"><span class="switch-focus-helper"></span></div>
                                    <span class="switch-ripple-container ulite-js-ripple-effect ulite-ripple--center" data-upgraded=",MaterialRipple"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="content-panel-body">
                        <div class="content-panel-help content-panel-help-accent">If you open this Alipay (WeChat payment) switch，the switch will be closed  with Hotel Alipay ( Wechat payment).</div>
                    </div>
                </div>
                <div class="content-panel">
                    <div class="content-panel-header">
                        <div class="content-panel-title">Collection by Hotel:</div>
                    </div>
                    <div class="content-panel-header" style="margin-left: 36px;">
                        <div class="content-panel-title">Alipay(<span id="hotelAlipayLabel"></span> enabled)</div>
                        <div class="col-xs-8">
                            <div class="col-xs-1">
                                <label class="switch ulite-js-switch ulite-js-ripple-effect ulite-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialSwitch,MaterialRipple"  id="hotelAlipayEnable">
                                    <input style="visibility:hidden" type="checkbox" class="switch-input" />
                                    <!--<span class="switch-label switch-label-sm"></span>-->
                                    <div class="switch-track"></div>
                                    <div class="switch-thumb"><span class="switch-focus-helper"></span></div>
                                    <span class="switch-ripple-container ulite-js-ripple-effect ulite-ripple--center" data-upgraded=",MaterialRipple"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="content-panel-header" style="margin-left: 36px;">
                        <div class="content-panel-title">WeChat Pay(<span id="hotelWechatLabel"></span> enabled)</div>
                        <div class="col-xs-8">
                            <div class="col-xs-1">
                                <label class="switch ulite-js-switch ulite-js-ripple-effect ulite-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialSwitch,MaterialRipple"  id="hotelWechatEnable">
                                    <input style="visibility:hidden" type="checkbox" class="switch-input" />
                                    <!--<span class="switch-label switch-label-sm"></span>-->
                                    <div class="switch-track"></div>
                                    <div class="switch-thumb"><span class="switch-focus-helper"></span></div>
                                    <span class="switch-ripple-container ulite-js-ripple-effect ulite-ripple--center" data-upgraded=",MaterialRipple"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="content-panel-header" style="margin-left: 36px;">
                        <div class="content-panel-title">Card payment(<span id="hotelVipcardLabel"></span> enabled)</div>
                        <div class="col-xs-8">
                            <div class="col-xs-1">
                                <label class="switch ulite-js-switch ulite-js-ripple-effect ulite-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialSwitch,MaterialRipple"  id="hotelVipcardEnable">
                                    <input style="visibility:hidden" type="checkbox" class="switch-input" />
                                    <!--<span class="switch-label switch-label-sm"></span>-->
                                    <div class="switch-track"></div>
                                    <div class="switch-thumb"><span class="switch-focus-helper"></span></div>
                                    <span class="switch-ripple-container ulite-js-ripple-effect ulite-ripple--center" data-upgraded=",MaterialRipple"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="content-panel-body">
                        <div class="content-panel-help content-panel-help-accent">If you open this Alipay (WeChat payment) switch，the switch will be closed  with Uclbrt Alipay ( Wechat payment).</div>
                        <div class="row vertical-margin">
                            <div class="pull-left"><span class="text-primary">●</span>&nbsp;&nbsp;Alipay information:&nbsp;<span class="text-primary" id="alipayInfo">(Unfilled)</span></div>
                            <div class="pull-left horizontal-margin">
                                <button class="btn-link p-y-0" data-toggle="modal" data-target="#alipayModel">Setting</button>
                            </div>
                        </div>
                        <div class="row vertical-margin">
                            <div class="pull-left"><span class="text-primary">●</span>&nbsp;&nbsp;WeChat payment information:&nbsp;<span class="text-primary" id="wechatPayInfo">(Unfilled)</span></div>
                            <div class="pull-left horizontal-margin">
                                <button class="btn-link p-y-0" data-toggle="modal" data-target="#wechatPayModel">Setting</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    <!--end of doc-->
    <!-- WeChat payment informationSetting -->
    <div class="modal fade" data-backdrop="static" id="wechatPayModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-title">WeChat payment information</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal form-sm">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">WeChat APPID</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-clear glyphicon glyphicon-remove hidden"></span>
                                <input type="text" class="form-control input-action-clear" id="wechatPayAppId" maxlength="32" autocomplete="off" placeholder="Please input WeChat APPID" value="" data-tip-object="#submitWechatPay"/>
                            </div>
                            <div class="col-xs-2">
                                <a href="javascript:void(0);" class="btn-link text-sm" data-toggle="modal" , data-target="#appIdHelpModal">Can not find?</a>
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label">WeChat APPSECRET</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-password glyphicon glyphicon-eye-open"></span>
                                <input type="password" class="form-control input-action-password" id="wechatPayAppSecret" maxlength="32" autocomplete="off" placeholder="Please input the WeChat APPSECRET" value="" data-tip-object="#submitWechatPay"/>
                            </div>
                            <div class="col-xs-4">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Alipay ID-MCHID</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-clear glyphicon glyphicon-remove hidden"></span>
                                <input type="text" class="form-control input-action-clear" id="wechatPayMChID" maxlength="32" autocomplete="off" placeholder="Please input ID-MCHID" value="" data-tip-object="#submitWechatPay"/>
                            </div>
                            <div class="col-xs-2">
                                <a href="javascript:void(0);" class="btn-link text-sm" data-toggle="modal" , data-target="#mchidHelpModal">Can not find?</a>
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Payment key-MCHKEY</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-password glyphicon glyphicon-eye-open"></span>
                                <input type="password" class="form-control input-action-password" id="wechatPayMChKey" maxlength="50" autocomplete="off" placeholder="Please input MCHKEY" value="" data-tip-object="#submitWechatPay"/>
                            </div>
                            <div class="col-xs-4">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label">File name-MPVERIFY</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-clear glyphicon glyphicon-remove hidden"></span>
                                <input type="text" class="form-control input-action-clear" id="wechatMyVerify" maxlength="40" autocomplete="off" placeholder="Please input the full file name" value="" data-tip-object="#submitWechatPay"/>
                            </div>
                            <div class="col-xs-2">
                                <a href="javascript:void(0);" class="btn-link text-sm" data-toggle="modal" , data-target="#mpverifyHelpModal">Can not find?</a>
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-sm btn-primary btn-raised" id="submitWechatPay">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--AppId 和 Secret的帮助model-->
    <div class="modal fade" data-backdrop="static" id="appIdHelpModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">The guidance of WeChat Official Accounts APPID and APPSECRET </h4>
                </div>
                <div class="modal-body">
                    <div>
                        1.Login<span class="text-accent">WeChat Official Accounts</span>(https://mp.weixin.qq.com)
                        <br/>2.On the left sidebar'<span class="text-accent">Find the Developer Center</span>',Click on the right to see<span class="text-accent">APPID</span>and<span class="text-accent">APPSECRET</span>
                        <br/>(APPSECRET need your Official Account <span class="text-accent">Administrator</span>to<span class="text-accent">Scan the qrcode</span>for display)
                        <br/><img src="/Public/dist/Home/image/tips_appid.png" class="img-responsive">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary ulite-js-ripple-effect ulite-js-btn btn-raised" data-dismiss="modal" data-upgraded=",MaterialButton,MaterialRipple">Get it<span class="btn-ripple-container"><span class="ripple"></span></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--MCHID的帮助model-->
    <div class="modal fade" data-backdrop="static" id="mchidHelpModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title"> The guidance of WeChat Pay MCHID</h4>
                </div>
                <div class="modal-body">
                    <div>
                       1.Login<span class="text-accent">WeChat Official Accounts</span>(https://mp.weixin.qq.com)
                        <br/>2.On the left sidebar'<span class="text-accent">Find the Developer Center</span>',Click on the right to see<span class="text-accent">APPID</span>and<span class="text-accent">APPSECRET</span>
                        <br/>(APPSECRET need your Official Account <span class="text-accent">Administrator</span>to<span class="text-accent">Scan the qrcode</span>for display)
                        <br/><img src="/Public/dist/Home/image/tips_howtoset.jpg" class="img-responsive">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary ulite-js-ripple-effect ulite-js-btn btn-raised" data-dismiss="modal" data-upgraded=",MaterialButton,MaterialRipple">Get it<span class="btn-ripple-container"><span class="ripple"></span></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--MPVERITY的帮助model-->
    <div class="modal fade" data-backdrop="static" id="mpverifyHelpModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">The guidance of WeChat Pay MPVERITY's file</h4>
                </div>
                <div class="modal-body">
                    <div>
                        1.Login<span class="text-accent">WeChat Official Accounts</span>(https://mp.weixin.qq.com)
                        <br/>2.Click on the left'<span class="text-accent">Official Account setting</span>',Click on the right to see'<span class="text-accent">the function setting</span>',Click on the JS interface to secure the domain name'<span class="text-accent">Setting</span>'and can see<span class="text-accent">The file name</span>
                        <br/><img src="/Public/dist/Home/image/tips_mpverify.jpg" class="img-responsive">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary ulite-js-ripple-effect ulite-js-btn btn-raised" data-dismiss="modal" data-upgraded=",MaterialButton,MaterialRipple">Get it<span class="btn-ripple-container"><span class="ripple"></span></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Alipay支付信息Setting -->
    <div class="modal fade" data-backdrop="static" id="alipayModel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div class="modal-title">Alipay information</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal form-sm">
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Alipay account</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-clear glyphicon glyphicon-remove hidden"></span>
                                <input type="text" class="form-control input-action-clear" id="alipayAccount" maxlength="50" autocomplete="off" placeholder="please input the alipay account" value="" data-tip-object="#submitAlipay"/>
                            </div>
                            <div class="col-xs-4">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Alipay PID</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-clear glyphicon glyphicon-remove hidden"></span>
                                <input type="text" class="form-control input-action-clear" id="alipayPId" maxlength="40" autocomplete="off" placeholder="Please input the alipay PID" value="" data-tip-object="#submitAlipay"/>
                            </div>
                            <div class="col-xs-2">
                                <a href="https://cshall.alipay.com/enterprise/help_detail.htm?help_id=473888" target="_blank" class="btn-link text-sm">Can not find?</a>
                            </div>
                            <div class="col-xs-2">
                                <div class="help-block"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-xs-3 control-label">Alipay MD5-KEY</label>
                            <div class="col-xs-5 has-action">
                                <span class="input-action-trigger input-trigger-password glyphicon glyphicon-eye-open"></span>
                                <input type="password" class="form-control input-action-password" id="alipayKey" maxlength="40" autocomplete="off" placeholder="Please input the alipay MD5-KEY" value="" data-tip-object="#submitAlipay"/>
                            </div>
                            <div class="col-xs-4">
                                <div class="help-block"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="form-horizontal form-sm">
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-2">
                                <div class="help-block inline-help-block inline-help-block-right"></div>
                                <button type="button" class="btn-sm btn-primary btn-raised" id="submitAlipay">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/uclbrt/ulite/city/citylist.min.js?rev=eb037c4769250fbfbd6d87f2b5ba2e1d"></script>
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=86d1603450adbfec1e8503138339e44e"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookSettingPage/pay.js?rev=2d38b03d87c24c6c1323296b64a9b783"></script>
</block>
